// Style Start
// -------------------------

html {
  position:relative;
  min-height:100%;
}

body {
	font-family: @baseFontFamily;
	font-size: @baseFontSize + 1;
	color: @baseFontcolor;
	min-height: 100%;
	padding-bottom: 0; margin: 0; padding: 0!important;
	
	@media (min-width:992px) {
		background: @body-bg;
	}
	@media (max-width: 992px) {
		margin-top: 100px;
	}
	
	 /* Fix content shifting to the right on modal open due to scrollbar closed */
	&.modal-open-noscroll {
		padding-right: 17px!important;		
		.navbar-top, .qs-layout-menu, .breadcrumbs.fixed {
			right: 17px;
		}
		.back-to-top {
			right: 32px;
		}
	}
}

h1, h2, h3, h4 {
	font-family: 'Roboto',sans-serif;
}
a {
	color: @link-color;
}

a:hover, a:active, a:focus {
	color: @link-hover-color;
}

a, a:visited, a:focus, a:active, a:hover {
	outline:0 none !important;
}
::-moz-focus-inner {
	border:0 none;
	-moz-outline-style: none;
}

.page-header {
	margin: 30px 0 15px;
	border-bottom: 1px solid @default-border-color;
	h1 {
		margin: 0;
		font-size: 26px;
		
		:before {
			content: "\f101";
			margin-right: 4px;
			font-family: FontAwesome;
			color: @themeColor;
		}
	}	
	.sub-title {
		font-size: 60%;
		text-transform: none;
		color: @gray-light;
	}

	&.title {
		margin: 0 -15px 25px;
		border-bottom: 1px solid @default-border-color;
		color: @gray-dark;
		padding: 15px;
		background-color: @white;
		
		@media (max-width: 639px) {
			h1 {
			font-size: 21px;
			}
		}
	}	
}

.breadcrumbs {
	position: relative;
	padding: 0 12px 0 0;
	min-height: 40px;
	line-height: 39px;
	background: @breadcrumbBg;
	margin: 0 -15px;
	border: 0 none;
	border-bottom: 1px solid @default-border-color;
	
	>.breadcrumb {
		background-color: transparent;
		display: inline-block;
		line-height: 20px;
		margin: 5px 15px 0 15px;
		padding: 0;	
		.active {
			color: @gray-light;
			font-size: @baseFontSize;
		}		
		a {
			color: @gray;
			font-size: @baseFontSize;
		}
		
		a:hover, a:focus, a:active {
			color: @link-color;
			text-decoration: none;
		}
		
		>li:first-child {		
			:before {
				content: "\f015";
				margin-right: 4px;
				font-family: FontAwesome;
				font-style: normal;
				font-weight: 400;
				font-size: 20px;
				vertical-align: top;
			}
		}
		
		>li+li:before {
			content: "//\00a0";
			padding: 0 5px;
		}
	}
	
	>.b-right {
		position: absolute;
		right: 15px;
		line-height: 20px;
		top: 0;
		margin: 0 -5px 0;
		padding: 0;
		border-left: 1px solid @default-border-color;
		
		ul {
			list-style: none;
			padding-left: 0;
			margin: 0;
			li {
				float: left;;
				padding: 0;
				border-right: 1px solid @default-border-color;
				position: relative;
				
				a {
					padding: 6px 12px 5px 12px; line-height: 29px; display: inline-block; text-decoration: none; color: @gray; font-size: @baseFontSize;
					
					span {
						color: @gray-light;
					}
				}
				
				ul {
					border-top: 0 none;
					li {
						border: 0 none;
						float: none;
					a {
						line-height: normal;
						display: block!important;
						padding: 3px 11px;
						color: @baseFontcolor;
					}
						
					}
				}
			}
		}
	}	
}

@media (min-width: 992px) {
	.breadcrumbs {
		&.fixed {
			position: fixed;
			right: 0;
			left: @navSideWidth;
			z-index: 1024;
			margin: 0;
			top: 50px;
			
			&.collapsed {
				left: 0;
			}
		}
	}
}



// Wrappers
// -------------------------

#wrapper {
  width: 100%;
}

#main-container {
	background: @sideBar;
	padding:0;
	
	div.row, ul.row {
		margin: 0 -7.5px;
	
		>[class*=col-] {
			padding: 0 7.5px;
		}
	}
	&:before {
		display: block;
		content: "";
		position: absolute;
		z-index: -2;
		width: 100%;
		max-width: inherit;
		bottom: 0;
		top: 0;
		background-color: @page-wrapper-bg;
	}
}

@media (min-width: 992px) {
	#main-container {
		&.container {
			.breadcrumbs {
				&.fixed {
					left: auto;
					right: auto;
					width: 1170px - @navSideWidth;
					margin: 0 -15px;
				}
				
				&.collapsed {
					width: 1170px;
				}
			}
			.footer {
				.footer-inner {
					left: auto!important;
					right: auto!important;
					width: 1140px - @navSideWidth;
					
					&.collapsed {
						width: 1140px;
					}
					
					.footer-content {
						left: -15px;
						right: -15px;
					}
				}
			}
			
			&:before {
				width: inherit;
			}
		}
	}
}

@media (min-width: 992px) and (max-width: 1200px) {
	#main-container {
		&.container {
			.breadcrumbs {
				&.fixed {
					left: auto;
					right: auto;
					width: 970px - @navSideWidth;
					margin: 0 -15px;
					top: 50px;
				}
					
				&.collapsed {
					width: 970px;
				}
			}		
			.footer {
				.footer-inner {
					left: auto!important;
					right: auto!important;
					width: 940px - @navSideWidth;
					
					&.collapsed {
						width: 940px;
					}
					
					.footer-content {
						left: -15px;
						right: -15px;
					}
				}
			}
		}
	}
}


#page-wrapper { 
  padding: 0 15px;
  background-color: @page-wrapper-bg;
  border: none;
}


@media (min-width:992px) {
  #page-wrapper {
	margin: 50px 0px 0px @navSideWidth;	
	&.collapsed {		
		margin: 50px 0px 0px 0px;
	}	
	&.fixed {
		margin: 90px 0px 0px @navSideWidth;
		&.collapsed {
			margin: 90px 0px 0px 0px;
		}
	}	
  }
}

// Footer Section
// -------------------------

.footer {
	padding-top: 64px;
	height: 0;
	width: 0;
	
	.footer-inner {
		position: absolute;
		z-index: auto;
		left: 0;
		right: 0;
		bottom: 0;
		
		.footer-content {
			position: absolute;
			border-top: 1px solid @default-border-color;
			left: 0;
			right: 0;
			bottom: 0;		 
			padding: 8px 15px;
			line-height: 36px;	
			background: @breadcrumbBg;			
		}
	}
}


@media (min-width: 992px) {
	.footer {
		.footer-inner {
			position: absolute;
			z-index: auto;
			left: @navSideWidth;
			right: 0;
			bottom: 0;
		
			&.collapsed {
				left: 0;
			}
		}
	}
}

// Bootstrap Overides
// -------------------------

ol.breadcrumb li.pull-right:before {
	content: normal;
}

blockquote, .blockquote-reverse, blockquote.pull-right {
	border-color: @themeColor;
}

.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus, .modal, .accordion-toggle:focus, .btn:focus {
	outline: none;
}

.panel {
	.box-shadow(none);	
	.panel-footer {
		background: @white;
	}
	
	&.panel-default {
		border-color: @default-border-color;
	}
}

.label, .badge {
	font-weight: normal;
	font-size: @baseFontSize - 2;
}


[class*=" fa-"], [class^="fa-"], [class*=" glyphicon-"], [class^="glyphicon-"] {
	text-align: center;
}

.popover {
	width: auto;
	.border-radius(0);
}
.btn, .well, .label, .thumbnail, .panel-heading, .alert, .panel, .progress, .input-group-sm > .form-control, .input-group-sm > .input-group-addon, .input-group-sm > .input-group-btn > .btn, .input-group-lg > .form-control, .input-group-lg > .input-group-addon, .input-group-lg > .input-group-btn > .btn, .list-group-item:first-child, .list-group-item:last-child, .form-control, .input-group-addon, .input-group-btn .btn, .dropdown-menu, .panel-group .panel, .panel-group .panel-heading, .pager li>a, .pager li>span, .breadcrumb, .nav-tabs > li > a, .nav-pills>li>a  {
	border-radius: 0;
}
.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
	background-color: @themeColor;
}
a.list-group-item.active, a.list-group-item.active:hover, a.list-group-item.active:focus, .nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus, .pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
	background-color: @themeColor;
	border-color: darken(@themeColor, 3%);
}
.nav-tabs, .nav-pills {
	margin-bottom: 10px;
	.open > a, .open > a:hover, .open > a:focus {
		border-color: @themeColor;
	}
}

.nav-tabs > li > a:hover, .nav-tabs > li > a:focus, .nav-pills > li > a:hover, .nav-pills > li > a:focus, .nav-tabs .open > a, .nav-tabs .open > a:hover, .nav-tabs .open > a:focus, .nav-pills .open > a, .nav-pills .open > a:hover, .nav-pills .open > a:focus, .nav-tabs ul.dropdown-menu > li > a:hover, .nav-tabs ul.dropdown-menu > li > a:focus, .nav-pills ul.dropdown-menu > li > a:hover, .nav-pills ul.dropdown-menu > li > a:focus {
	background-color: @gray-lighter;
}

.pagination>li>a, .pagination>li>span, .pagination>li:first-child>a, .pagination>li:first-child>span {
	border-bottom-left-radius: 0;
	border-top-left-radius: 0;
	color:@themeColor;
}

.pagination>li:last-child>a, .pagination>li:last-child>span {
	border-bottom-right-radius: 0;
	border-top-right-radius: 0;
	color:@themeColor;
}

.pagination>li>a {
	&:hover {
		color: @themeColor;
	}
}

.dropdown-menu {
	font-size: @baseFontSize;
}

.progress, .thumbnail, .panel-group, dl {
	margin-bottom: 15px;

}
.thumbnail {
	padding: 3px;
}

.modal-content {
	.border-radius(0);
	border: 0 none;
	
	.modal-header {
		background-color: @gray-lighter;
		
		.modal-title {
			font-size: @baseFontSize + 3!important;
		}
		
		.close {
			outline:0 none !important;
		}
	}
	.modal-footer {
		padding: 10px 15px;
		border-top-color: @default-border-color;
		.box-shadow(none);
		background-color: @gray-lighter;
	}
}

/* Fix content shifting to the right on modal open due to scrollbar closed */
.modal-open {
  overflow-y: auto !important;
}

.modal-open-noscroll {
  overflow-y: hidden !important;
}

/* change z-index when opened in modal */
.modal-open {
	.datepicker, .datetimepicker, .select2-drop-mask, .select2-drop, .select2-search, .colorpicker, .daterangepicker, .bootstrap-timepicker-widget {z-index:1141 !important;}
}

a.list-group-item {
	.list-group-item-heading {
		color: @baseFontcolor;
	}	
}